<template>
	<view style="width:750rpx;height:100vh;box-sizing: border-box;padding-top: 40rpx;background: #fff;">
		<view style="width: 700rpx;margin: 0 auto;">
			<button class="chooseAvatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image style="width: 120rpx;height: 120rpx;" :src="avatar" mode=""></image>
			</button>
			<view style="height: 40rpx;"></view>
			<u--form labelPosition="left" :labelWidth="60">
				<u-form-item label="昵称" borderBottom >
					<input type="nickname" :value="wx_name" border="none" @change="nicknameChange"></input>
				</u-form-item>
				<u-form-item label="手机号" borderBottom >
					<input v-model="mobile" border="none"></input>
				</u-form-item>
				<u-form-item>
					<view style="width: 700rpx;margin:0 auto;">
						<u-button type="primary" form-type="submit" @tap="savaEdit">提交</u-button>
					</view>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from '@/utils/config.js'
	export default {
		data() {
			return {
				wx_name:'',
				avatar:'',
				mobile:''
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init(){
				const {
					data,
					code
				} = await this.request('user/edit', {}, 'POST')
				if(code==1){
					this.wx_name = data.wx_name
					this.avatar = data.avatar
					this.mobile = data.mobile
					
				}
			},
			onChooseAvatar(e) {
				console.log(e)
			    const { avatarUrl } = e.detail 
				uni.uploadFile({
					url: `${baseUrl}upload/image`, 
					filePath: avatarUrl,
					name: 'file',
					header:{
						'token': uni.getStorageSync('usertoken'),
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes) 
						this.avatar = JSON.parse(uploadFileRes.data).data.url;
					}
				});
			    // this.avatar = avatarUrl
			},
			nicknameChange(e){
				this.wx_name = e.detail.value
			},
			uploadPic(){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: `${baseUrl}upload/image`, 
							filePath: tempFilePaths[0],
							name: 'file',
							header:{
								'token': uni.getStorageSync('usertoken'),
							},
							success: (uploadFileRes) => {
								this.avatar = JSON.parse(uploadFileRes.data).data.url;
							}
						});
					}
				});
			},
			async savaEdit(){
				const {wx_name,avatar,mobile} = this
				const {
					data,
					code,
					msg
				} = await this.request('user/edit_post', {wx_name,avatar,mobile}, 'POST')
				if(code==1){
					uni.showToast({
						icon:'none',
						title:'修改成功'
					})
					
				}else{
					uni.showToast({
						icon:'none',
						title:msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #fff;
}
input{
	text-align: right;
}
.chooseAvatarBtn{
	border: none;
	padding: 0;
	font-size: 14px;
	display: block;
	width: 120rpx;
	height: 120rpx;
	margin: 0 auto;
	position:relative;
	image{
		width:120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		background: #ccc;
	}
}
.chooseAvatarBtn:after{
	border: none;
	background: #fff;
}
</style>